<template>
  <!--  displayType	0	number	显示类型 0固定 | 1横向滑动 -->
  <!--  listType	3	number	显示样式 3 | 4 | 5 -->
  <view class="h-image-navigate-container" :style="[componentStyle]">
    <view v-if="detail.componentStyle.displayType === 0" :class="['h-image-navigate',`span-${detail.componentContentList.length}`]">
      <view class="_item line-clamp-1" v-for="(item,index) in detail.componentContentList" :key="index" @click="handleClickSpot(item)">
        <image :style="{'borderRadius': componentContentStyle.borderRadius}" class="_itemImage" :src="item.imgUrl" mode="widthFix"/>
        <text class="_text line-clamp-1" :style="{'color': componentContentStyle.color}">{{ item.title || '' }}</text>
      </view>
    </view>
    <view class="h-image-navigate-2" v-if="detail.componentStyle.displayType === 1" :style="[componentStyle]">
      <scroll-view class="_scroll" scroll-x="true" @touchend.stop>
        <view :class="['_item',`item-${detail.componentStyle.listType}`]" v-for="(item,index) in detail.componentContentList" :key="index" @click="handleClickSpot(item)">
          <view :style="{'borderRadius': componentContentStyle.borderRadius}" :class="['_itemImage',`_itemImage-${detail.componentStyle.listType}`]">
            <x-image :src="item.imgUrl"/>
          </view>
          <text class="_text line-clamp-1" :style="{'color': componentContentStyle.color}">{{ item.title || '' }}</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
import navigateTo from '@/utils/x-navigate';
import formatStyle from '@/utils/x-format-style';
export default {
  name: 'HImageNavigate',
  components: { XImage },
  props: {
    imageNavigateList: {
      type: Array,
      default: () => []
    },
    detail: {
      type: Object,
      default: () => ({
        componentContentList: []
      })
    },
    sourcePageType: { // 埋点用
      type: [String, Object],
      default: '1'
    },
    sourcePageId: { // 埋点用源页面Id
      type: [String, Object],
      default: ''
    },
    source: {
      type: [String, Object],
      default: ''
    },
    groupsSource: {
      type: [String, null],
      default: ''
    }
  },
  data() {
    return {
      componentStyle: {},
      componentContentStyle: {}
    };
  },
  computed: {
  },
  created() {
    this.handleComponentStyle();
  },
  mounted() {

  },
  watch: {},
  methods: {
    handleClickSpot(item) {
      navigateTo(item, {
        sourcePageType: this.sourcePageType,
        sourcePageId: this.sourcePageId,
        source: this.source,
        groupsSource: this.groupsSource
      });
    },
    handleComponentStyle() {
      const { borderRadius, backgroundColor, color } = this.detail?.componentStyle;
      this.componentStyle = {
        ...formatStyle(this.detail?.componentStyle, ['marginBottom', 'padding', 'backgroundColor']),
        backgroundColor: backgroundColor,
        backgroundSize: 'cover'
      };
      this.componentContentStyle = {
        borderRadius: borderRadius === 1 ? '30rpx' : borderRadius === 2 ? '200rpx' : '0',
        color: color
      };
    },
    getData() {

    }
  }
};
</script>

<style lang="scss" scoped>
.h-image-navigate{
  padding: 16px 24px;
  display: grid;
  &.span-1{
    gap: 0;
    grid-template-columns: repeat(1, minmax(0px, 1fr));
  }
  &.span-2{
    gap: 22px;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }
  &.span-3{
    gap: 21px;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
  }
  &.span-4{
    gap: 26px;
    grid-template-columns: repeat(4, minmax(0px, 1fr));
  }
  &.span-5{
    gap: 23px;
    grid-template-columns: repeat(5, minmax(0px, 1fr));
  }
  &.span-6{
    gap: 18px;
    grid-template-columns: repeat(6, minmax(0px, 1fr));
  }
  &.span-7{
    gap: 12px;
    grid-template-columns: repeat(7, minmax(0px, 1fr));
  }
  &.span-8{
    gap: 10px;
    grid-template-columns: repeat(8, minmax(0px, 1fr));
  }
  &.span-9{
    gap: 9px;
    grid-template-columns: repeat(9, minmax(0px, 1fr));
  }
  &.span-10{
    gap: 8px;
    grid-template-columns: repeat(10, minmax(0px, 1fr));
  }
  ._item{
    display: flex;
    flex-direction: column;
    //justify-content: center;
    align-items: center;
    ._itemImage{
      width: 100%;
    }
    ._text{
      margin-top: 10px;
      text-align: center;
      width: 100%;
      font-size: 26px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.h-image-navigate-2{
  padding: 16px 0;
  ._scroll{
    width: 100%;
    white-space: nowrap;
    padding-left: 24px;
    ._item:first-child{
      margin-left: 0;
    }
    ._item{
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-left: 16px;
      ._text{
        margin-top: 10px;
        text-align: center;
        width: 100%;
        font-size: 26px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &.item-3{
        width: 188px;
      }
      &.item-4{
        width: 144px;
      }
      &.item-5{
        width: 114px;
      }
      ._itemImage{
        border-radius: 200px;
        &._itemImage-3{
          width: 188px;
          height: 188px;
          overflow: hidden;
        }
        &._itemImage-4{
          width: 144px;
          height: 144px;
          overflow: hidden;
        }
        &._itemImage-5{
          width: 114px;
          height: 114px;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
